<template>
  <div>
    <treeselect v-model="deptId" :options="deptOptions" :show-count="true" :clearable="false"
                          placeholder="请选择归属部门" :normalizer="normalizer"/>
  </div>
</template>

<script>
import { listSimpleDepts } from "@/api/system/dept"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "SelectDept",
  components: { Treeselect },
  props: {
    value: {
      required: true
    }    
  },
  data() {
    return {
      deptOptions: [],
      deptId: this.value,
    }
  },
  watch: {
    value(newVal) {
      this.deptId = newVal;
    },
    deptId(newVal, oldVal){
      this.$emit("input", this.deptId)
    }
  },
  created() {
    this.getDeptListFun();
  },
  methods: {
    /** 查询工厂列表 */
    getDeptListFun(){
      listSimpleDepts().then(response => {
        // 处理 deptOptions 参数
        this.deptOptions = [];
        this.deptOptions.push(...this.handleTree(response.data, "id"));
      })
    },
    // 格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    }
  }
};
</script>

